<template>
  <view>
    <text>颠三倒四多所多</text>
    <AtCountdown :format="{ hours: ':', minutes: ':', seconds: '' }" :seconds="10" />
    <AtButton :on-click="(e) => {
        gotoDetailPage()
      }">详情页</AtButton>
    <AtButton type="primary" :on-click="showToast.bind(this)">显示弹窗</AtButton>
    <AtButton type="primary" :on-click="handleClick.bind(this,'primary')">图片编辑页</AtButton>
    <video
      id="video"
      src="http://vjs.zencdn.net/v/oceans.mp4"
      autoplay="true"
      bindfullscreenchange="fullScreen"
      initial-time="0"
      loop="false"
      muted="false"
      :direction="90"
      @play="onVideoPlay()"
    />
  </view>
</template>

<script>
import './index.scss'
import { AtButton, AtCountdown } from 'taro-ui-vue'
import Taro from '@tarojs/taro'
const MAX_RECORD_LENGTH = 10

export default {
  name: 'BookStoreIndex',
  components: {
    AtButton,
    AtCountdown
  },
  data () {
    return {
      msg: 'Hello world!'
    }
  },
  mounted () {
    const videoContext = Taro.createVideoContext('video');
    videoContext.requestFullScreen(90);
  },
  methods: {
    gotoDetailPage () {
      Taro.navigateTo({ url: '/pages/detail/index' })
    },
    handleClick (type) {
      console.log(`this is a button type call ${type}`)
      Taro.navigateTo({
        url: '/pages/translate/index'
      })
    },
    showToast () {
      Taro.showToast({
        title: `最多上传${MAX_RECORD_LENGTH}条语音哦~`,
        icon: "none",
      })
    },
    onVideoPlay () {
      //执行全屏方法   dddd
      const videoContext = Taro.createVideoContext('video');
      videoContext.requestFullScreen(90);
    }
  }
}
</script>
